<template>
	<view class="youran-diy" style="display:flex;flex-direction:column;">
		<template v-if="youranDiyState == 'success'">
			<!-- 单行上下滚动 -->
			<template v-if="listRoll.length">
				<list-roll
					v-for="(item,index) in listRoll"
					:style="'order:'+item.order+';'"
					:Item="item"
					:YrConfig="yrConfig.blockGroups"></list-roll>
			</template>
			
			<!-- 列表，新闻样式 -->
			<template v-if="listNews.length">
				<template v-if="listNewsState">
					<list-news
						v-for="(item,index) in listNews"
						:style="'order:'+item.order+';'"
						:listGid="listGid"
						:listHid="listHid"
						:Item="item"
						:YrConfig="yrConfig.blockGroups"
						ref="listNewsRef"></list-news>
				</template>
			</template>
			
			<!-- 列表，问答样式 -->
			<template v-if="listAsk.length">
				<template v-if="listAskState">
					<list-ask
						v-for="(item,index) in listAsk"
						:style="'order:'+item.order+';'"
						:listGid="listGid"
						:listHid="listHid"
						:Item="item"
						:YrConfig="yrConfig.blockGroups"
						ref="listAskRef"></list-ask>
				</template>
			</template>
			
			<!-- 列表，朋友圈样式 -->
			<template v-if="listInteract.length">
				<template v-if="listInteractState">
					<list-interact
						v-for="(item,index) in listInteract"
						:style="'order:'+item.order+';'"
						:listGid="listGid"
						:listHid="listHid"
						:Item="item"
						:YrConfig="yrConfig.blockGroups"
						ref="listInteractRef"></list-interact>
				</template>
			</template>
			
			<!-- 列表，微博样式 -->
			<template v-if="listPublic.length">
				<template v-if="listPublicState">
					<list-public
						v-for="(item,index) in listPublic"
						:style="'order:'+item.order+';'"
						:listGid="listGid"
						:listHid="listHid"
						:Item="item"
						:YrConfig="yrConfig.blockGroups"
						ref="listPublicRef"></list-public>
				</template>
			</template>
			
			<!-- 列表，简单列表 -->
			<template v-if="listConcise.length">
				<template v-if="listConciseState">
					<list-concise
						v-for="(item,index) in listConcise"
						:style="'order:'+item.order+';'"
						:listGid="listGid"
						:listHid="listHid"
						:Item="item"
						:YrConfig="yrConfig.blockGroups"
						ref="listConciseRef"></list-concise>
				</template>
			</template>
			
			<!-- 列表，评论列表 -->
			<template v-if="listComment.length">
				<template v-if="listCommentState">
					<list-comment
						v-for="(item,index) in listComment"
						:style="'order:'+item.order+';'"
						:Item="item"></list-comment>
				</template>
			</template>
			
			<!-- 列表，瀑布流样式 -->
			<template v-if="listWaterfall.length">
				<template v-if="listWaterfallState">
					<list-waterfall
						v-for="(item,index) in listWaterfall"
						:style="'order:'+item.order+';'"
						:listGid="listGid"
						:listHid="listHid"
						:Item="item"
						:YrConfig="yrConfig.blockGroups"
						ref="listWaterfallRef"></list-waterfall>
				</template>
			</template>
			
			<!-- 幻灯片 -->
			<template v-if="blockFilmstrip.length">
				<block-filmstrip
					v-for="(item,index) in blockFilmstrip"
					:style="'order:'+item.order+';'"
					:Item="item"
					:YrConfig="yrConfig.blockGroups"></block-filmstrip>
			</template>
			
			<!-- 块，即时聊天 -->
			<template v-if="blockLiveChat.length">
				<block-live-chat
					v-for="(item,index) in blockLiveChat"
					:style="'order:'+item.order+';'"
					:Order="item.order"
					:Gid="item.gid"
					:Css="item.css"></block-live-chat>
			</template>
			
			<!-- 块，打卡按钮 -->
			<template v-if="blockRecord.length">
				<block-record
					v-for="(item,index) in blockRecord"
					:style="'order:'+item.order+';'"
					:Order="item.order"
					:Gid="item.gid"
					:Css="item.css"
					:Image="item.image"
					:Title="item.title"
					:RightButton="item.rightButton"
					:RightButtonCss="item.rightButtonCss"></block-record>
			</template>
			
			<!-- 万能 HTML -->
			<template v-if="blockHtml.length">
				<block-html
					v-for="(item,index) in blockHtml"
					:style="'order:'+item.order+';'"
					:Item="item"></block-html>
			</template>
			
			<!-- 快速发布 -->
			<template v-if="blockQuickPublish.length">
				<block-quick-publish
					v-for="(item,index) in blockQuickPublish"
					:style="'order:'+item.order+';'"
					:YrConfig="yrConfig"
					:Order="item.order"
					:Css="item.css"
					:Placeholder="item.placeholder"
					:Gid="item.gid"
					:Hid="item.hid"
					:UniqueId="item.uniqueId"
					:config="item.config"></block-quick-publish>
			</template>
			
			<!-- 块，操作按钮 -->
			<template v-if="blockOperatingButton.length">
				<block-operating-button
					:Item="blockOperatingButton"
					></block-operating-button>
			</template>
			
			<!-- 块，话题 -->
			<template v-if="blockHashtag.length">
				<block-hashtag
					v-for="(item,index) in blockHashtag"
					:style="'order:'+item.order+';'"
					:Order="item.order"
					:Item="item"></block-hashtag>
			</template>
			
			<!-- 我关注的用户/Ta们发的帖子 -->
			<template v-if="JSON.stringify(publicFollowUsersPosts) != '{}'">
				<public-follow-users-posts
					:style="'order:'+publicFollowUsersPosts.order+';'">
				</public-follow-users-posts>
			</template>
			
			<!-- 我关注的用户 -->
			<template v-if="JSON.stringify(publicFollowUsers) != '{}'">
				<public-follow-users :style="'order:'+publicFollowUsers.order+';'">
				</public-follow-users>
			</template>
			
			<!-- 我关注的内容小组 -->
			<template v-if="JSON.stringify(publicFollowGroups) != '{}'">
				<public-follow-groups :style="'order:'+publicFollowGroups.order+';'">
				</public-follow-groups>
			</template>
			
			<!-- 附近的帖子 -->
			<template v-if="JSON.stringify(publicNearbyContent) != '{}'">
				<public-nearby-content :style="'order:'+publicNearbyContent.order+';'">
				</public-nearby-content>
			</template>
			
			<!-- 用户列表 -->
			<template v-if="JSON.stringify(publicListUser) != '{}'">
				<public-list-user :style="'order:'+publicListUser.order+';'">
				</public-list-user>
			</template>
			
			<!-- 我收藏的帖子 -->
			<template v-if="JSON.stringify(publicFollowPosts) != '{}'">
				<public-follow-posts :style="'order:'+publicFollowPosts.order+';'">
				</public-follow-posts>
			</template>
			
			<!-- 数据统计 -->
			<template v-if="JSON.stringify(blockStatistics) != '{}'">
				<template v-if="blockStatisticsState">
					<block-statistics :style="'order:'+blockStatistics.order+';'" :Item="blockStatistics">
					</block-statistics>
				</template>
			</template>
			
			<!-- 分类，小组 -->
			<template v-if="JSON.stringify(publicCategoryGroup) != '{}'">
				<public-category-group :style="'order:'+publicCategoryGroup.order+';'">
				</public-category-group>
			</template>
			
			<!-- 分类，话题 -->
			<template v-if="JSON.stringify(publicCategoryHashtag) != '{}'">
				<public-category-hashtag
					:style="'order:'+publicCategoryHashtag.order+';'"
					:Item="publicCategoryHashtag">
				</public-category-hashtag>
			</template>
			
			<!-- 底部浮动按钮 -->
			<template v-if="blockTailButton.length">
				<block-tail-button
					style="order:999999999;"
					:Item="blockTailButton">
				</block-tail-button>
			</template>
			
			<!-- 块，横排列表 -->
			<template v-if="blockHorizontalSlidingList.length">
				<block-horizontal-sliding-list
					v-for="(item,index) in blockHorizontalSlidingList"
					:style="'order:'+item.order+';'"
					:Item="item"></block-horizontal-sliding-list>
			</template>
		</template>
		<template v-if="youranDiyState == 'loading'">
			<view class="youran-diy-loading">
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
				<view class="__for loading-css"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"youran-diy",
		props:{
			Config:{
				type:String,
				default:""
			},
			listGid:{
				type:String,
				default:""
			},
			listHid:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				yrConfig:{},
				youranDiyState:"loading",
				listRoll:[],
				listNews:[],
				listNewsState:true,
				listWaterfall:[],//瀑布流组件
				listWaterfallState:true,//瀑布流组件状态
				listAsk:[],
				listAskState:true,
				listPublic:[],
				listPublicState:true,
				listInteract:[],
				listInteractState:true,
				listConcise:[],
				listConciseState:true,
				listComment:[],
				listCommentState:true,
				blockFilmstrip:[],
				blockHtml:[],
				blockLiveChat:[],
				blockRecord:[],
				blockQuickPublish:[],
				blockOperatingButton:[],
				blockHashtag:[],
				publicFollowUsersPosts:{},
				publicFollowUsers:{},
				publicFollowGroups:{},
				publicNearbyContent:{},
				publicListUser:{},
				publicFollowPosts:{},
				publicCategoryGroup:{},//小组分类
				publicCategoryHashtag:{},//话题分类
				blockStatistics:{},
				blockStatisticsState:true,
				blockTailButton:[],
				blockHorizontalSlidingList:[]
			};
		},
		computed:{
			f1(){
				return this.$store.state.listStatus
			}
		},
		watch:{
			f1(curVal,oldVal){
				if(curVal){
					this.reloading();
				}
			}
		},
		mounted(){
			this.getYrConfig();
		},
		methods: {
			getYrConfig(){
				uni.request({
					url:this.$_Config() + "Config.json",
					method:'GET',
					success: (res) => {
						this.yrConfig = res.data;
						// 请求，页面，配置文件
						this.getPageConfig();
					}
				})
			},
			// 请求，页面，配置文件
			getPageConfig(){
				uni.request({
					url:this.$_Config() + this.Config,
					method:'GET',
					success: (res) => {
						this.youranDiyState = "success";
						if(res.data.listRoll){
							this.listRoll = res.data.listRoll;
						}
						if(res.data.blockFilmstrip){
							this.blockFilmstrip = res.data.blockFilmstrip;
						}
						if(res.data.blockHtml){
							this.blockHtml = res.data.blockHtml;
						}
						if(res.data.listNews){
							this.listNews = res.data.listNews;
						}
						// 瀑布流
						if(res.data.listWaterfall){
							this.listWaterfall = res.data.listWaterfall;
						}
						if(res.data.listAsk){
							this.listAsk = res.data.listAsk;
						}
						if(res.data.listInteract){
							this.listInteract = res.data.listInteract;
						}
						if(res.data.listPublic){
							this.listPublic = res.data.listPublic;
						}
						if(res.data.listConcise){
							this.listConcise = res.data.listConcise;
						}
						if(res.data.listComment){
							this.listComment = res.data.listComment;
						}
						if(res.data.blockLiveChat){
							this.blockLiveChat = res.data.blockLiveChat;
						}
						if(res.data.blockRecord){
							this.blockRecord = res.data.blockRecord;
						}
						if(res.data.blockQuickPublish){
							this.blockQuickPublish = res.data.blockQuickPublish;
						}
						if(res.data.blockOperatingButton){
							this.blockOperatingButton = res.data.blockOperatingButton;
						}
						if(res.data.blockHashtag){
							this.blockHashtag = res.data.blockHashtag;
						}
						if(res.data.publicFollowUsersPosts){
							this.publicFollowUsersPosts = res.data.publicFollowUsersPosts;
						}
						if(res.data.publicFollowUsers){
							this.publicFollowUsers = res.data.publicFollowUsers;
						}
						if(res.data.publicFollowGroups){
							this.publicFollowGroups = res.data.publicFollowGroups;
						}
						if(res.data.publicNearbyContent){
							this.publicNearbyContent = res.data.publicNearbyContent;
						}
						if(res.data.publicListUser){
							this.publicListUser = res.data.publicListUser;
						}
						if(res.data.publicFollowPosts){
							this.publicFollowPosts = res.data.publicFollowPosts;
						}
						// 小组分类
						if(res.data.publicCategoryGroup){
							this.publicCategoryGroup = res.data.publicCategoryGroup;
						}
						// 话题分类
						if(res.data.publicCategoryHashtag){
							this.publicCategoryHashtag = res.data.publicCategoryHashtag;
						}
						if(res.data.blockStatistics){
							this.blockStatistics = res.data.blockStatistics;
						}
						if(res.data.blockTailButton){
							this.blockTailButton = res.data.blockTailButton;
						}
						if(res.data.blockHorizontalSlidingList){
							this.blockHorizontalSlidingList = res.data.blockHorizontalSlidingList;
						}
					}
				})
			},
			// 重载组件
			reloading(){
				// if(this.listAsk.length){
				// 	this.listAskState = false;
				// 	setTimeout(()=>{
				// 		this.listAskState = true;
				// 	},100);
				// }
				// if(this.listNews.length){
				// 	this.listNewsState = false;
				// 	setTimeout(()=>{
				// 		this.listNewsState = true;
				// 	},100);
				// }
				// if(this.listWaterfall.length){
				// 	this.listWaterfallState = false;
				// 	setTimeout(()=>{
				// 		this.listWaterfallState = true;
				// 	},100);
				// }
				// if(this.listPublic.length){
				// 	this.listPublicState = false;
				// 	setTimeout(()=>{
				// 		this.listPublicState = true;
				// 	},100);
				// }
				// if(this.listInteract.length){
				// 	this.listInteractState = false;
				// 	setTimeout(()=>{
				// 		this.listInteractState = true;
				// 	},100);
				// }
				// if(this.listConcise.length){
				// 	this.listConciseState = false;
				// 	setTimeout(()=>{
				// 		this.listConciseState = true;
				// 	},100);
				// }
				// if(this.listComment.length){
				// 	this.listCommentState = false;
				// 	setTimeout(()=>{
				// 		this.listCommentState = true;
				// 	},100);
				// }
				// if(JSON.stringify(this.blockStatistics) != '{}'){
				// 	this.blockStatisticsState = false;
				// 	setTimeout(()=>{
				// 		this.blockStatisticsState = true;
				// 	},100);
				// }
				// setTimeout(()=>{
				// 	this.$store.commit('mutationsStatelistStatus',false)
				// },1000);
				const lists = [
					{ list: this.listAsk, state: 'listAskState' },
					{ list: this.listNews, state: 'listNewsState' },
					{ list: this.listWaterfall, state: 'listWaterfallState' },
					{ list: this.listPublic, state: 'listPublicState' },
					{ list: this.listInteract, state: 'listInteractState' },
					{ list: this.listConcise, state: 'listConciseState' },
					{ list: this.listComment, state: 'listCommentState' }
				];

				const promises = lists.map(item => {
					if (item.list.length) {
						return new Promise(resolve => {
							this[item.state] = false;
							setTimeout(() => {
								this[item.state] = true;
								resolve();
							}, 100);
						});
					}
				});

				if (JSON.stringify(this.blockStatistics) != '{}') {
					promises.push(
						new Promise(resolve => {
							this.blockStatisticsState = false;
							setTimeout(() => {
								this.blockStatisticsState = true;
								resolve();
							}, 100);
						})
					);
				}

				Promise.all(promises).then(() => {
					setTimeout(() => {
						this.$store.commit('mutationsStatelistStatus', false);
					}, 1000);
				});
			},
			// 触底事件
			onReachBottomMethods(){
				// if(this.yrConfig.onReachBottom){
				// 	// 获取order排序，重新排列
				// 	let arr = [];
				// 	if(this.listConcise.length){
				// 		for(let i=0;i<this.listConcise.length;i++){
				// 			arr.push(this.listConcise[i].order)
				// 		}
				// 	}
				// 	if(this.listAsk.length){
				// 		for(let i=0;i<this.listAsk.length;i++){
				// 			arr.push(this.listAsk[i].order)
				// 		}
				// 	}
				// 	if(this.listInteract.length){
				// 		for(let i=0;i<this.listInteract.length;i++){
				// 			arr.push(this.listInteract[i].order)
				// 		}
				// 	}
				// 	if(this.listNews.length){
				// 		for(let i=0;i<this.listNews.length;i++){
				// 			arr.push(this.listNews[i].order)
				// 		}
				// 	}
				// 	if(this.listWaterfall.length){
				// 		for(let i=0;i<this.listWaterfall.length;i++){
				// 			arr.push(this.listWaterfall[i].order)
				// 		}
				// 	}
				// 	if(this.listPublic.length){
				// 		for(let i=0;i<this.listPublic.length;i++){
				// 			arr.push(this.listPublic[i].order)
				// 		}
				// 	}
				// 	arr.sort((a, b) => b - a);
					
				// 	// arr[0] 为最大数值，则最尾部
				// 	if(this.listConcise.length){
				// 		for(let i=0;i<this.listConcise.length;i++){
				// 			if(this.listConcise[i].order == arr[0]){
				// 				this.$refs.listConciseRef[i].getList('more')
				// 			}
				// 		}
				// 	}
				// 	if(this.listAsk.length){
				// 		for(let i=0;i<this.listAsk.length;i++){
				// 			if(this.listAsk[i].order == arr[0]){
				// 				this.$refs.listAskRef[i].getList('more')
				// 			}
				// 		}
				// 	}
				// 	if(this.listInteract.length){
				// 		for(let i=0;i<this.listInteract.length;i++){
				// 			if(this.listInteract[i].order == arr[0]){
				// 				this.$refs.listInteractRef[i].getList('more')
				// 			}
				// 		}
				// 	}
				// 	if(this.listNews.length){
				// 		for(let i=0;i<this.listNews.length;i++){
				// 			if(this.listNews[i].order == arr[0]){
				// 				this.$refs.listNewsRef[i].getList('more')
				// 			}
				// 		}
				// 	}
				// 	if(this.listWaterfall.length){
				// 		for(let i=0;i<this.listWaterfall.length;i++){
				// 			if(this.listWaterfall[i].order == arr[0]){
				// 				this.$refs.listWaterfallRef[i].getList('more')
				// 			}
				// 		}
				// 	}
				// 	if(this.listPublic.length){
				// 		for(let i=0;i<this.listPublic.length;i++){
				// 			if(this.listPublic[i].order == arr[0]){
				// 				this.$refs.listPublicRef[i].getList('more')
				// 			}
				// 		}
				// 	}
				// }
				const lists = [
					{ list: this.listConcise, ref: 'listConciseRef' },
					{ list: this.listAsk, ref: 'listAskRef' },
					{ list: this.listInteract, ref: 'listInteractRef' },
					{ list: this.listNews, ref: 'listNewsRef' },
					{ list: this.listWaterfall, ref: 'listWaterfallRef' },
					{ list: this.listPublic, ref: 'listPublicRef' }
				];
				
				if (this.yrConfig.onReachBottom) {
					let arr = [];
					lists.forEach(item => {
						if (item.list.length) {
							for (let i = 0; i < item.list.length; i++) {
								arr.push(item.list[i].order);
							}
						}
					});
					arr.sort((a, b) => b - a);
				
					lists.forEach(item => {
						if (item.list.length && item.list[0].order === arr[0]) {
							this.$refs[item.ref][0].getList('more');
						}
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.youran-diy-loading{
		padding: 25rpx;
		.__for{
			width: 100%;
			height: 70rpx;
			margin-bottom: 25rpx;
		}
	}
</style>